<template>
  <el-carousel :interval="4000" height="20vw">
    <el-carousel-item v-for="(item,idx) in data.data" :key="idx">
      <router-link :to="'/product/'+item.id">
        <el-image style="width: 100%;height:100%"
                  src="/static/images/adv-image2.jpg"
                  fit="contain">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </router-link>
      <div class="carousel-caption"><h3>{{item.name}}</h3><!----><!----></div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>

export default {
  name: "ProductCarousel",
  data() {
    return {data: []};
  },
  mounted() {
    this.loadData();
  },
  methods: {
    //加载产品数据
    loadData() {
      this.axios({
        url: "product/query",
        method: "POST",
        data: {size: this.data.size, page: this.data.page - 1, sorts: [{property: "idx", direction: "asc"}]}
      }).then(resp => {
        this.data.data = resp.data.data
        this.$forceUpdate();
      })
    }
  }
}
</script>
<style scoped>
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  color: #fff;
  text-align: center;
  text-shadow: rgb(0, 0, 0) 0px 0px 2px;
}
</style>
